<template>
    <el-form
            ref="loginFormTwo"
            :rules="loginRules"
            :model="loginForm"
            class="login-form"
            status-icon
            label-width="0">
        <el-form-item prop="username">
            <el-input
                    v-model="loginForm.username"
                    size="small"
                    auto-complete="off"
                    placeholder="请输入用户名"
                    @keyup.enter.native="handleLogin">
                <i
                        slot="prefix"
                        class="icon-yonghu"/>
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input
                    :type="passwordType"
                    v-model="loginForm.password"
                    size="small"
                    auto-complete="off"
                    placeholder="请输入密码"
                    @keyup.enter.native="handleLogin">
                <i
                        slot="suffix"
                        class="el-icon-view el-input__icon"
                        @click="showPassword"/>
                <!--<router-link to="/forgetlogin" slot="suffix">
                  <a href="#" class="alink" style="padding-left:8px;">忘记密码？</a>
                </router-link>-->
                <i slot="prefix" class="iconfont icon-mima"></i>
            </el-input>
        </el-form-item>
        <el-form-item prop="code">
            <el-row :span="24">
                <el-col :span="16">
                    <el-input
                            :maxlength="code.len"
                            v-model="loginForm.code"
                            size="small"
                            auto-complete="off"
                            placeholder="请输入验证码"
                            @keyup.enter.native="handleLogin">
                        <i
                                slot="prefix"
                                class="icon-yanzhengma"/>
                    </el-input>
                </el-col>
                <el-col :span="8">
                    <div class="login-code">
            <span
                    v-if="code.type == 'text'"
                    class="login-code-img"
                    @click="refreshCode">{{ code.value }}</span>
                        <img
                                v-else
                                :src="code.src"
                                class="login-code-img"
                                @click="refreshCode">
                        <!-- <i class="icon-shuaxin login-code-icon" @click="refreshCode"></i> -->
                    </div>
                </el-col>
            </el-row>

        </el-form-item>
        <el-form-item>
            <el-button
                    type="primary"
                    size="small"
                    class="login-submit"
                    @click.native.prevent="handleLogin">登录
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
    // @ is an alias to /src
    import HelloWorld from "@/components/HelloWorld.vue";
    import {LoginRules, LoginForm} from "@/types/index.d.ts";
    import {Component, Vue} from "vue-property-decorator";
    import {randomLenNum} from '@/utils/util';

    @Component({})
    export default class Message extends Vue {
        private loginRules: LoginRules = {
            username: [
                { required: true, message: '请输入用户名', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, message: '密码长度最少为6位', trigger: 'blur' }
            ],
            code: [
                { required: true, message: '请输入验证码', trigger: 'blur' }
            ]
        };

        private loginForm: LoginForm = {
            username: 'admin',
            password: '123456',
            code: '',
            randomStr: '',
        };

        // lifecycle hook
        mounted() {
        };


        private async handleLogin() {

            this.$refs.loginFormTwo.validate(valid => {
                if (valid) {
                    this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
                        this.$router.push({ path: this.tagWel.value })
                    }).catch(() => {
                        this.refreshCode()
                    })
                }
            })
        }

        private async refreshCode() {
            this.loginForm.code = ''
            this.loginForm.randomStr = randomLenNum(this.code.len, true)
            this.code.type === 'text'
                ? (this.code.value = randomLenNum(this.code.len))
                : (this.code.src = `${this.codeUrl}?randomStr=${this.loginForm.randomStr}`)
        },
    }
</script>

<style scoped>

</style>
